
<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --text-color: black; /* 初始文本颜色 */
    }
    body {
      color: var(--text-color);
      transition: color 0.3s;
    }
  </style>
</head>
<body>
  <h1>CSS变量动态修改演示</h1>
  <button onclick="changeColor()">点击切换文本颜色</button>

  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--text-color','pink')
    }
  </script>
</body>
</html>
